<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{width:`${isCollapse?65:240}px`, transition: '0.4s'}">
        <el-menu 
          router
          default-active="index"
          background-color="#DEE1E6"
          text-color="#334455"
          :style="{height: '100vh'}"
          :collapse="isCollapse"
          class="el-menu-vertical-demo">
          <el-menu-item>
            <img width="30px" style="display:inline; margin-right: 5px;" src="../../assets/hmlogo2.png" alt="">
            <template slot="title">
              <span style="font-size: 1.5em; color:#334455; font-weight: bold;">婚博会后台管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/index">
            <i class="el-icon-s-home"></i>
            <template slot="title">
              首页
            </template>
          </el-menu-item>
          <template v-if="$store.state.utype === '1'">
            <!-- 店铺管理 -->
            <el-submenu index="shop">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span slot="title">店铺管理</span>
              </template>
              <el-menu-item index="/home/shop-list">
                <i class="el-icon-house"></i>
                <span slot="title">店铺列表</span>
              </el-menu-item>
              <el-menu-item index="/home/shop-add">
                <i class="el-icon-plus"></i>
                <span slot="title">新增店铺</span>
              </el-menu-item>
            </el-submenu>
            <!-- 商品管理 -->
            <el-submenu index="pro">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span slot="title">婚纱管理</span>
              </template>
              <el-menu-item index="/home/pro-list">
                <i class="el-icon-shopping-cart-1"></i>
                <span slot="title">婚纱列表</span>
              </el-menu-item>
              <el-menu-item index="/home/pro-add">
                <i class="el-icon-shopping-cart-2"></i>
                <span slot="title">新增婚纱</span>
              </el-menu-item>
            </el-submenu>
            <!-- 用户管理 -->
            <el-submenu index="user">
              <template slot="title" >
                <i class="el-icon-s-custom"></i>
                <span slot="title">用户管理</span>
              </template>
              <el-menu-item index="/home/user-list">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户列表</span>
              </el-menu-item>
              <el-menu-item index="/home/user-add">
                <i class="el-icon-user"></i>
                <span slot="title">新增用户</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="/home/reserva">
              <i class="el-icon-s-management"></i>
              <span slot="title">预约管理</span>
            </el-menu-item>
            <!--申请管理 -->
            <el-submenu index="approve">
              <template slot="title" >
                <i class="el-icon-s-order"></i>
                <span slot="title">审核店铺申请管理</span>
              </template>
              <el-menu-item index="/home/approve-unexamine">
                <i class="el-icon-s-release"></i>
                <span slot="title">未审核</span>
              </el-menu-item>
              <el-menu-item index="/home/approve-inexamine">
                <i class="el-icon-s-claim"></i>
                <span slot="title">已审核</span>
              </el-menu-item>
            </el-submenu>
            <!-- <el-menu-item index="/home/advertising">
              <i class="el-icon-s-check"></i>
              <span slot="title">广告宣传管理</span>
            </el-menu-item> -->
            <el-submenu index="complain">
              <template slot="title">
                <i class="el-icon-chat-dot-round"></i>
                <span slot="title">投诉记录</span>
              </template>
              <el-menu-item index="/home/un-Complaint">
                <i class="el-icon-chat-square"></i>
                <span slot="title">未处理投诉</span>
              </el-menu-item>
              <el-menu-item index="/home/complaint-user">
                <i class="el-icon-chat-dot-square"></i>
                <span slot="title">投诉 - 用户因素</span>
              </el-menu-item>
              <el-menu-item index="/home/Complaint-store">
                <i class="el-icon-chat-line-square"></i>
                <span slot="title">投诉 - 店铺因素</span>
              </el-menu-item>
            </el-submenu>
          </template>
          <!-- 店铺 -->
          <template v-if="$store.state.utype === '2'">
            <el-submenu index="shop">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span slot="title">店铺管理</span>
              </template>
              <el-menu-item :index="`/home/shop-details/${this.$store.state.uid}`">
                <i class="el-icon-house"></i>
                <span slot="title">基本信息</span>
              </el-menu-item>
              <el-menu-item index="/home/shop-revise">
                <i class="el-icon-plus"></i>
                <span slot="title">修改信息</span>
              </el-menu-item>
            </el-submenu>
            <!-- 商品管理 -->
            <el-submenu index="pro">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span slot="title">婚纱管理</span>
              </template>
              <el-menu-item index="/home/pro-list">
                <i class="el-icon-shopping-cart-1"></i>
                <span slot="title">婚纱列表</span>
              </el-menu-item>
              <el-menu-item index="/home/pro-add">
                <i class="el-icon-shopping-cart-2"></i>
                <span slot="title">新增婚纱</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="reserva">
              <template slot="title" >
                <i class="el-icon-s-management"></i>
                <span slot="title">预约管理</span>
              </template>
              <el-menu-item index="/home/un-Reserva">
                <i class="el-icon-s-order"></i>
                <span slot="title">未完成预约</span>
              </el-menu-item>
              <el-menu-item index="/home/expire-Reserva">
                <i class="el-icon-s-release"></i>
                <span slot="title">失效预约</span>
              </el-menu-item>
              <el-menu-item index="/home/in-Reserva">
                <i class="el-icon-s-claim"></i>
                <span slot="title">已完成预约</span>
              </el-menu-item>
            </el-submenu>
            <!-- <el-submenu index="complain">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">活动消息</span>
              </template>
              <el-menu-item index="/home/on-complain">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">加入活动</span>
              </el-menu-item>
              <el-menu-item index="/home/un-complain">
                <i class="el-icon-plus"></i>
                <span slot="title">申请活动</span>
              </el-menu-item>
            </el-submenu> -->
            <el-menu-item index="/home/complaint">
              <i class="el-icon-menu"></i>
              <span slot="title">投诉警告</span>
            </el-menu-item>
          </template>
          
         </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse=true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse=false"></i>
          <el-breadcrumb separator="/">
             <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item,i) in $route.meta.breadcrumbs" :key="i" >{{item}}</el-breadcrumb-item> 
          </el-breadcrumb>
          <span>未登录</span>
          <!-- 头像 -->
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="退出登录"
            @confirm="secede"
          >
            <el-button slot="reference" type="text">
              <div class="head">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <span style="line-height: 20px;">{{name}}</span>
              </div>
            </el-button>
          </el-popconfirm>
          <!-- <el-dropdown split-button>
            <span class="el-dropdown-link">
              <div class="head">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <span style="line-height: 20px;">{{name}}</span>
              </div>
            </span>
            <el-dropdown-menu slot="dropdown"  >
              <el-dropdown-item  @confirm="secede">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          
        </el-header>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import { mapState } from 'vuex';
export default {
  data() {
    return {
      isCollapse: false,
      name:'',
    }
  },
  // 计算属性 -辅助函数
  computed:{
    // 下述写法与user计算属性原理一致
    // ...mapState(['user'])
    //该计算属性直接返回state对象中的user对象
    // user(){
    //   return this.$store.state.uname
    // }
  },
  methods:{
    secede(){
      // console.log(1111);
      this.$store.commit('updataType','')
      this.$store.commit("updataName",'');
      this.$store.commit("updataid",'');
      // console.log(this.$store.state.utype,'类型');
      this.$router.push('/manage/login')
    }
  },
  mounted(){
    // this.reload();
    // console.log('111',this.$store.state.utype);
    if(this.$store.state.uname){
      this.name = this.$store.state.uname
    }else{
       if(this.$store.state.utype === '1'){
          this.name = '系统管理员'
       }else {
          this.name = '店铺管理员'
       }
    }
  },
};
</script>

<style lang="scss" scoped>
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  i {
    font-size: 1.3em;
  }
  .head{
    font-size: 20px;
    // margin-bottom: 10px;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }

</style>
